<template>
	<view class="page">
		
		<view>当前展示数据为：</view>
		<view class="timer">
			<view>{{time}}</view>
			<u-button class="btn" size="mini" type="warning" @click="show = true">选择时间</u-button>
		</view>
		
		<!-- 当月数据的展示 -->
		
		<u-table color="#f0f0f0" border-color="rgba(255,153,0, .5)" bg-color="transparent">
			<!-- 表头 -->
			<u-tr>
				<u-th>时间</u-th><u-th>分类</u-th><u-th>金额</u-th><u-th>备注</u-th>
			</u-tr>
			<!-- 遍历表格数据 -->
			<u-tr v-for="(item, index) in recordList" :key="index">
				<!-- 时间 				分类 			金额	 -->
				<u-td>{{item.time}}</u-td><u-td>{{item.sort}}</u-td><u-td>{{item.money}}</u-td>
				<!-- 无备注 -->
				<u-td v-if="!item.remarks" style="position: relative;">
					<view class="delBtn" @click="delRecord(item)">x</view>
					空
				</u-td>
				<!-- 有备注 -->
				<u-td v-else style="position: relative;">
					<view class="delBtn" @click="delRecord(item)">x</view>
					<view class="watch" @click="watchMore(item)">查看</view>
				</u-td>
			</u-tr>
		</u-table>
		<!-- 遮罩层 -->
		<u-mask :show="showModel" @click="showModel = false">
			<!-- 底部弹窗 -->
			<view class="showBox">
				<u-table color="#666666" border-color="rgba(255,153,0, .5)" bg-color="transparent">
					<!-- 表头 -->
					<u-tr>
						<u-th>时间</u-th><u-th>分类</u-th><u-th>金额</u-th>
					</u-tr>
					<u-tr>
						<!-- 时间 				分类 			金额	 -->
						<u-td>{{showItem.time}}</u-td><u-td>{{showItem.sort}}</u-td><u-td>{{showItem.money}}</u-td>
					</u-tr>
					<u-tr>
						<u-th>备注</u-th>
					</u-tr>
					<u-tr>
						<u-td>{{showItem.remarks}}</u-td>
					</u-tr>
				</u-table>
			</view>
			
		</u-mask>
		<!-- 删除确认 -->
		<u-modal v-model="showDelModel" :content="content" :show-cancel-button="true" @confirm="del"></u-modal>
		<!-- 选择器，用来选择查看某年某月的数据 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm="timeHandle"></u-picker>
	</view>
</template>

<script>
	import timerHandle from '../../utils/timeHandle.js'
	export default {
		data() {
			return {
				// 从后台获取记录数据
				recordList: [
					{ time: '08-01', sort: '收入', money: 22, remarks: ''},
					{ time: '08-01', sort: '收入', money: 22, remarks: '123'},
					{ time: '08-01', sort: '收入', money: 22, remarks: '312'},
					{ time: '08-01', sort: '收入', money: 22, remarks: '321'},
					{ time: '08-01', sort: '收入', money: 22, remarks: '0'},
					{ time: '08-01', sort: '收入', money: 22, remarks: 'hello word'}
				],
				// 点击要查看的记录数据
				showItem: {},
				// 当前选中的时间
				time: '',
				// 删除框的确认
				showDelModel: false,
				// 删除框的提示
				content: '',
				// 点击备注下的查看展示弹出层
				showModel: false,
				// 是否开启时间选择框
				show: false,
				// 时间选择器的参数
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		mounted() {
			const { timer } = timerHandle()
			this.time = timer
		},
		methods: {
			// 确认删除记录
			del: function() {
				
			},
			// 点击x，model提示是否确认删除
			delRecord: function(data) {
				const { time, sort, money } = data
				this.content = `确认删除 ${time} ${sort} ${money},该条记录吗？`
				this.showDelModel = true
			},
			// 查看备注详情
			watchMore: function(data) {
				this.showItem = data
				this.showModel = true
			},
			// 选择了其他月份
			timeHandle: function(e) {
				const { year, month } = e
				this.time = `${year}-${month}`
			}
		}
	}
</script>

<style scoped>
	.page view{
		height: 80rpx;
		line-height: 80rpx;
	}
	.timer{
		padding-left: 2em;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.timer view{
		width: 200rpx;
	}
	.btn{
		margin-left: 120rpx;
	}
	.watch{
		padding: 0 2px;
		color: #4CD964;
		border-bottom: 1px solid #F0AD4E;
		width: 80rpx;
		height: 40rpx!important;
		line-height: 38rpx!important;
		margin: 0 auto;
	}
	.showBox{
		padding: 5px;
		width: 690rpx;
		height: auto!important;
		position: fixed;
		line-height: 38rpx!important;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 5px;
	}
	.delBtn{
		width: 30rpx;
		height: 30rpx!important;
		line-height: 20rpx!important;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		color: red;
	}
</style>
